/*SCROLL BUTTON*/
@-webkit-keyframes pulse {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes pulse {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.parallax-banner-section-scroll-button{
    position: absolute; 
    width: 45px;
    height: 45px;
    bottom: 150px;
    left: calc(50% - 25px);
    animation: pulse 1.5s infinite;
    cursor: pointer;
    text-align: center;
}
.parallax-banner-section-scroll-button:focus{
    outline: none;
}
.parallax-banner-section-scroll-button i{
    position: relative;
    font-size: 50px;
    top: 12px;
}
.parallax-banner-content-width{
    width: 100%;
}

/*BANNER CONTENT*/
.parallax-banner-section {
    position: relative;
    float: left;
    height: 100vh;
    width: 100vw;
    max-width: 100%;
    overflow-x: hidden !important;
}
.always-filler-on-top .parallax-banner-section {
    height: calc(100vh - var(--header-height));
}
.parallax-banner-section-content{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding-top: 100px;
    padding-left: 60px;
    padding-right: 20px;
}
.parallax-banner-section-text-content{
    position: relative;
    max-width: 100%;
}
.parallax-banner-section-text-content p,
.parallax-banner-section-text-content h1,
.parallax-banner-section-text-content h2,
.parallax-banner-section-text-content h3,
.parallax-banner-section-text-content h4{
    margin: 20px 0;
}
.parallax-banner-section-logo-outer{
    position: absolute;
    bottom: 50px;
    width: 100%;
}
.parallax-banner-section-logo-inner{
    position: relative;
    height: 100px;
    width: 300px;
}
.parallax-banner-section-logo{
    position: relative;
    height: 100%;
    width: 100%;
}

.parallax-banner-header{
    float: left;
    clear: both;
}
.parallax-banner-header p{
    margin: 0;
}
.parallax-banner-text {
    float: left;
    clear: both;
    margin-top: 0.3em;
}
/*Because Apple refuses to support background-attachment: fixed, Safari gets a plain, boring background image. No parallax.*/
.safari-banner-section-content{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    box-sizing: border-box;
}
.safari-banner-section-text-content{
    position: relative;
    max-width: 100%;
}
.safari-banner-section-text-content p,
.safari-banner-section-text-content h1,
.safari-banner-section-text-content h2,
.safari-banner-section-text-content h3,
.safari-banner-section-text-content h4{
    margin: 20px 0;
}
.safari-banner-section-logo-outer{
    position: absolute;
    bottom: 50px;
    width: 100%;
}
.safari-banner-section-logo-inner{
    position: relative;
    height: 100px;
    width: 300px;
}
.safari-banner-section-logo{
    position: relative;
    height: 100%;
    width: 100%;
}

.safari-banner-header{
    float: left;
    clear: both;
}
.safari-banner-header p{
    margin: 0;
}
.safari-banner-text{
    float: left;
    clear: both;
    margin-top: 0.3em;
}

/*SCROLL BUTTON*/
@media only screen and (max-width: 1023px) {
    .parallax-banner-section-logo-inner {
        width: 210px;
    }
    .parallax-banner-section-scroll-button {
        bottom: 50px;
    }
    /*Apple's "special" rules*/
    .safari-banner-section-content {
        padding-top: 50px;
        padding-left: 20px;
    }
    .parallax-banner-section-logo-outer,
    .safari-banner-section-logo-outer {
        bottom: 60px;
    }
    .safari-banner-section-logo-inner {
        width: 210px;
    }
}

/*Regular rules for regular browsers*/
.safari-visible {
    display: none;
}
.safari-hidden {
    display: block;
}

@media not all and (min-resolution:.001dpcm) {
    /*Special rules for special browsers*/
    .safari-visible {
        display: block !important;
    }

    .safari-hidden {
        display: none !important;
    }
}